<template>
	<view class="real-time-warn">
		<text class="tit rbox">预警结果信息</text>
		
		<view class="weather cbox">
			<text class="name rbox">今日天气</text>
			<view class="wrap rbox box_space_a">
				<view class="item rbox box_y_center">
					<image class="icon" src="/static/weather01.png" mode="aspectFill"></image>
					<text class="msg">温度：30℃</text>
				</view>
				<view class="item rbox box_y_center">
					<image class="icon" src="/static/weather02.png" mode="aspectFill"></image>
					<text class="msg">湿度：50%</text>
				</view>
				<view class="item rbox box_y_center">
					<image class="icon" src="/static/weather03.png" mode="aspectFill"></image>
					<text class="msg">降雨：小雨</text>
				</view>
			</view>
		</view>
		
		<view class="list cbox">
			<view class="li rbox box_y_center box_space_b">
				<text class="tit">今日发生风险</text>
				<text class="msg">无风险</text>
			</view>
			<view class="li rbox box_y_center box_space_b">
				<text class="tit">初次发生日期</text>
				<text class="msg">2020/09/15</text>
			</view>
			<view class="li rbox box_y_center box_space_b">
				<text class="tit">当前严重程度</text>
				<text class="msg">轻度</text>
			</view>
			<view class="li cbox article">
				<text class="tit">用药建议</text>
				<text class="msg">
					霜霉病指的是由真菌中的霜霉菌引起的植物病害。霜
					霉菌是专性寄生菌，极少数的霜霉菌已可人工培养，
					如引起谷子白发病的禾生指梗霉、引起白菜霜霉病的
					寄生霜霉霜霉菌是专性寄生菌，极少数的霜霉菌已可
					人工培养，如引起谷子白发病的禾生指梗霉、引起白
					菜霜霉病
				</text>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.real-time-warn {
		padding: 0 42rpx;
		.tit {
			margin-top: 30rpx;
			font-size: 40rpx;
			line-height: 1;
			color: #333;
		}
		.weather {
			padding: 32rpx 30rpx 0;
			margin-top: 20rpx;
			width: 100%;
			min-height: 200rpx;
			box-shadow: 0px 0px 6rpx rgba(179, 187, 199, 0.5);
			border-radius: 20rpx;
			.name {
				font-size: 34rpx;
				line-height: 1;
				color: #333;
			}
			.wrap {
				margin-top: 30rpx;
				.item {
					.icon {
						width: 36rpx;
						height: 36rpx;
						background-color: lightblue;
					}
					.msg {
						margin-left: 4rpx;
						font-size: 28rpx;
						line-height: 1;
						color: #484848;
					}
				}
			}
		}
		.list {
			.li {
				position: relative;
				padding: 30rpx 0;
				.tit {
					margin: 0;
					font-size: 32rpx;
					line-height: 1;
					color: #333;
				}
				.msg {
					font-size: 32rpx;
					line-height: 1;
					color: #9E9E9E;
				}
				&.article {
					&::after {
						content: initial;
					}
					.msg {
						margin-top: 30rpx;
						font-size: 28rpx;
						line-height: 1.5;
					}
				}
				&::after {
					position: absolute;
					box-sizing: border-box;
					-webkit-transform-origin: center;
					transform-origin: center;
					content: " ";
					pointer-events: none;
					right: 16px;
					bottom: 0;
					left: 16px;
					border-bottom: 1px solid #ebedf0;
					-webkit-transform: scaleY(.5);
					transform: scaleY(.5);
				}
			}
		}
	}
</style>
